<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<button id="but1">清除前面</button>
		<script>
			var canvas = document.getElementById("canvas");
			    //动态设置宽高
			    canvas.width = 400;
			    canvas.height = 300;
			 
			    var content = canvas.getContext("2d");
			    //设置画笔的样式    
			    content.strokeStyle = "#000";
			    content.lineWidth = 1;
			    content.lineCap = 'round';
			    content.lineJoin = 'round';
			    content.shadowBlur = 1;
			    content.shadowColor = '#000';
			 
			    content.beginPath();
			    //点击
			    canvas.addEventListener("touchstart", function(e) {
			        content.beginPath();
			        var touch = e.targetTouches[0];
			        var x = touch.pageX - canvas.offsetLeft;
			        var y = touch.pageY - canvas.offsetTop;
			        content.moveTo(x, y);
			    });
			    //移动
			    canvas.addEventListener("touchmove", function(event) {
			        event.preventDefault();
			        var touch = event.targetTouches[0];
			        var x = touch.pageX - canvas.offsetLeft;
			        var y = touch.pageY - canvas.offsetTop;
			        content.lineTo(x, y);
			        content.stroke();
			    });
			    //结束
			    canvas.addEventListener("touchend", function(event) {
			        content.closePath();
			        $('.but2').attr('disabled', false);
			    });
			    //清除画布 .but1元素 点击事件
			    document.getElementById("but1").onclick = function() {
			        content.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
			    }
			
		</script>
	</body>
</html>
